<script setup>
import { ref,onMounted } from 'vue'
import {getCuleData,setClueList} from '@/api/clue.js'

const multipleTableRef = ref()

//多选数据
const multipleSelection = ref([])

const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}

//表格多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}

/* 分页样式 */
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


//修改页数
const handleSizeChange = (val) => {
  formData.value.pagesize = val
  searchData()
}

//修改页码
const handleCurrentChange = (val) => {
  formData.value.page = val
  searchData()
}


/* 线索池 */
//搜索form数据
const formData = ref({
  page:1,
  pagesize:10,
  clueId:'',
  phone:'',
  createTime:'',
  clueSource:null,
  total:null
})

//表格线索列表
const tableDataList = ref([])

//确定-搜索
const searchData = async()=>{
  const {data} = await getCuleData(formData.value)
  formData.value.total = data.total
  tableDataList.value = data.records
  console.log(data)
}

//重置清空
const restforms = ref(null)
const resetForm = ()=>{
  restforms.value.resetFields()
  formData.value.page = 1
  searchData()
}

//存储捞取数据
const ClueData = ref([])

//点击-捞取
const getCluePool = async(id)=>{
  ClueData.value.push(id)
  console.log(id)
  const res = await setClueList(ClueData.value)
  console.log(res)
}

//点击-批量捞取
const cluesObtain = ()=>{

}

//生命周期
onMounted(()=>{
  searchData()
})
</script>
<template>
  <div>
    <el-form :model="formData" ref="restforms" label-position="top">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="线索ID" prop="clueId">
            <el-input v-model="formData.clueId" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="渠道来源" prop="clueSoure">
            <el-select v-model="formData.clueSoure" placeholder="请选择">
              <el-option label="词典暂无数据" value="shanghai" />
              <el-option label="词典暂无数据" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="10" align="middle">
        <el-col :span="6">
          <el-form-item label="创建日期" prop="createTime">
            <el-time-picker v-model="formData.createTime" placeholder="选择日期" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-col :offset="6" :span="6" justify="space-between">
            <el-button type="success" round @click="searchData">搜索</el-button>
            <el-button type="info" round @click="resetForm">重置</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="6">
        <el-button size="large" type="primary" @click="cluesObtain">批量捞取</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div>
      <el-table ref="multipleTableRef" :data="tableDataList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="clueId" label="线索ID" width="120"></el-table-column>
        <el-table-column property="phone" label="手机号" width="120" />
        <el-table-column property="clueSource" label="渠道来源" show-overflow-tooltip >
          <template v-slot="{row}">
            <span v-if="row.clueSource === 0">线索活动</span>
            <span v-else-if="row.clueSource === 1">推荐介绍</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>
        <el-table-column property="createTime" label="创建时间" width="120" />
        <!-- <el-table-column property="address" label="归属人" show-overflow-tooltip /> -->
        <el-table-column property="status" label="在线状态" width="120" >
          <template v-slot="{row}">
            <span v-if="row.status === 0">全部</span>
            <span v-else-if="row.status === 1">待跟进</span>
            <span v-else-if="row.status === 2">跟进中</span>
            <span v-else-if="row.status === 3">废弃线索</span>
            <span v-else-if="row.status === 4">伪线索</span>
            <span v-else-if="row.status === 5">转商机</span>
            <span v-else-if="row.status === 6">线索转派</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>
        <el-table-column property="address" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="getCluePool(scope.row.clueId)">
              捞取
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px" class="clue_footer">

        <el-row>
          <el-col :span="4">
          </el-col>
          <el-col :offset="8" :span="12">
            <div class="demo-pagination-block">
              <el-pagination v-model:current-page="formData.page" v-model:page-size="formData.pagesize"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="formData.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.clue_footer{
  .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
}
</style>